<template>
  <van-nav-bar fixed placeholder :z-index="zIndex" :title="title" :right-text="rightText" @click-right="onClickRight">
    <template #title>
      <div class="navbar_title" @click="onClickTitle">
        <i :class="`iconfont ${icon}`" v-if="icon"></i>
        <slot></slot>
      </div>
    </template>

    <template #left>
      <slot name="left">
        <div v-if="leftArrow" class="left_arrow">
          <i class="iconfont ai-icon-fanhui" @click="onClickLeftFn"></i>
          <span>|</span>
          <i class="iconfont ai-icon-shouye" @click="toHome"></i>
        </div>
      </slot>
    </template>
  </van-nav-bar>
</template>

<script setup>
import config from '@/config/config';
const props = defineProps({
  title: {
    type: String,
  },
  leftArrow: {
    type: Boolean,
    default: true,
  },
  rightText: {
    type: String,
    default: '',
  },
  fixed: {
    type: Boolean,
    default: false,
  },
  placeholder: {
    type: Boolean,
    default: true,
  },
  icon: {
    type: String,
    default: '',
  },
  zIndex: {
    type: [String, Number],
    default: 1,
  },
  onClickLeft: {
    type: Function,
  }
})

const emit = defineEmits(['changeRightText', 'onClickTitle'])

const pages = getCurrentPages();

// 点击返回
const onClickLeftFn = () => {
  if (props.onClickLeft) {
    return props.onClickLeft()
  }
  if (pages.length >= 2) {
    return uni.navigateBack()
  }
  uni.switchTab({ url: config.page.index })
}




// 点击标题
function onClickTitle() {
  emit('onClickTitle')
}

// 点击右侧文字
const onClickRight = () => {
  emit('changeRightText')
}



// 去往首页
function toHome() {
  uni.reLaunch({
    url: config.page.index,
  })
}


</script>

<style lang="less" scoped>
.navbar_title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
}

.left_arrow {
  display: flex;
  align-items: center;
  gap: 30rpx;
  font-size: 28rpx;
  color: var(--a-three-text-color);

  .iconfont {
    color: var(--a-three-text-color);
    font-size: 38rpx;
  }
}
</style>